// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

const staticOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    top: '2%',
    data: ['系统自动审核', '人工审核', '审核未通过'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 18
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

const staticOptionMid = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    top: '2%',
    data: ['系统自动审核', '人工审核', '审核未通过'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 22
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

const staticOptionSmall = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    top: '2%',
    data: ['系统自动审核', '人工审核', '审核未通过'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 22
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

// 备选颜色，有需求则进行循环

const colors = ['#1890ff', '#00e2fe', '#fb6c84', '#0159c2', '#7574ee', '#0099ff', '#7574ee']

const circleCenter = [
  ['10%', '50%'], ['26%', '50%'], ['42%', '50%'], ['58%', '50%'],
  ['74%', '50%'], ['90%', '50%']
]

// const circleCenter = [
//   ['6%', '50%'], ['18.5%', '50%'], ['31%', '50%'], ['43.5%', '50%'],
//   ['56%', '50%'], ['68.5%', '50%'], ['81%', '50%'], ['93.5%', '50%']
// ]
const circleRadius = [
  ['50%', '58%'], ['50%', '58%'], ['50%', '58%'], ['50%', '58%'],
  ['50%', '58%'], ['50%', '58%']
]

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // // 装配数据 必须使用箭头函数
    additionalOptions.data.forEach((d1, d2) => {
      this.option.series.push({
        name: d1.name,
        type: 'pie',
        startAngle: -90,
        radius: circleRadius[d2],
        center: circleCenter[d2],
        legendHoverLink: false,
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: false
        },
        labelLine: {
          show: false,
          length: 30,
          length2: 0
        },
        data: []
      })
      let total = 0
      if (d1.name.length === 4) {
        this.option.series[d2].data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'outside',
            padding: [0, 0, 0, -45],
            textStyle: {
              fontSize: '20',
              color: '#bad3ff'
            },
            formatter: () => d1.name
          }
        })
      } else if (d1.name.length === 8) {
        this.option.series[d2].data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'outside',
            padding: [0, 0, 0, -80],
            textStyle: {
              fontSize: '20',
              color: '#bad3ff'
            },
            formatter: () => d1.name
          }
        })
      } else {
        this.option.series[d2].data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'outside',
            padding: [0, 0, 0, -70],
            textStyle: {
              fontSize: '20',
              color: '#bad3ff'
            },
            formatter: () => d1.name
          }
        })
      }

      d1.data.forEach((p1, p2) => {
        this.option.series[d2].data.push({
          name: additionalOptions.name[p2],
          value: p1,
          itemStyle: {
            color: colors[p2]
          }
        })
        total += p1
      })
      this.option.series[d2].data.push({
        value: 0,
        itemStyle: {
          opacity: 0
        },
        label: {
          show: true,
          position: 'center',
          textStyle: {
            fontFamily: 'customer',
            fontSize: '30',
            color: '#fff'
          },
          formatter: () => ((d1.data[0] + d1.data[1]) * 100 / total).toFixed(2) + '%'
        }
      })
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
